import { Input, ITouchEvent, Text, Textarea, View } from '@tarojs/components';
import {
  Image,
  Divider,
  Avatar,
  Backdrop,
  Swiper,
  RollingText,
} from '@taroify/core';
import Taro from '@tarojs/taro';
import { useState } from 'react';
import { Fire } from '@taroify/icons';
import { imgAddPrefix, saveImageToAlbum, strToArray } from '.';
import { getUser } from './auth';

/**
 * 渲染多文本换行函数
 * @param {Object} text  - 需要渲染的文本
 * @returns {JSX.Element} 渲染的组件
 */
export const RenderMultilineText = text => {
  const lines = text.split('\n');
  return lines.map((line, index) => (
    <Text key={index} className="my-1">
      {line}
      {index < lines.length - 1 && <Text>{'\n'}</Text>}{' '}
      {/* 除最后一行外，添加换行 */}
    </Text>
  ));
};

/**
 * 给热度前面加一个火焰的图标
 * @param {Object} str  - 具体的热度值
 * @returns {JSX.Element} 渲染的组件
 */
export const RenderFireIcon = (str: string) => {
  const containsD = /\d+人/.test(str);
  return (
    <View className="flex items-center  text-[#305888] bg-[#1F2C55] p-1 rounded">
      <View>{containsD ? <Fire /> : null}</View>
      <View className="max-w-20 truncate">{str}</View>
    </View>
  );
};

interface tagItem {
  id: string | number;
  label: string;
  iamge?: string;
}

export const RenderTagList = ({
  tags,
  onClick,
  maxHeight = 'auto',
  avatar = true,
  checked = true,
}: {
  tags: Array<tagItem>;
  onClick?: (id: string | number, tag?: tagItem) => void;
  maxHeight?: string;
  avatar?: boolean;
  checked?: boolean;
}) => {
  const [check, setCheck] = useState<string | number>('');
  return (
    <View
      style={{ maxHeight }}
      className="flex gap-2 flex-wrap  overflow-hidden my-2"
    >
      {tags.map(tag => (
        <View
          key={tag.id}
          className={` ${
            check == tag.id && checked
              ? 'bg-[#EAF0FE] text-[#7C94DD]'
              : 'text-[#303030] bg-[#F7F7F7]'
          } text-xs max-w-32 flex gap-1 items-center truncate  py-1 px-2  rounded-xl`}
          onClick={() => {
            setCheck(tag.id);
            onClick && onClick(tag.id);
          }}
        >
          {avatar && (
            <Avatar
              src={imgAddPrefix(tag.iamge ?? '')}
              size="mini"
              shape="rounded"
            />
          )}
          <View>{tag.label}</View>
        </View>
      ))}
    </View>
  );
};

export const RenderMultilineImage = ({
  images,
  width = 200,
  height = 200,
}: {
  images: string;
  width?: number;
  height?: number;
}) => {
  const imgs = strToArray(images);
  const [open, setOpen] = useState(false);
  const [current, setCurrent] = useState(0);
  return (
    <View onClick={e => e.stopPropagation()} className="flex gap-1 flex-wrap">
      {imgs.map((img, i) => (
        <Image
          key={i}
          mode="aspectFill"
          className=" rounded"
          width={width}
          height={height}
          src={img}
          onClick={e => {
            setOpen(true);
            setCurrent(i);
            Taro.hideTabBar();
          }}
        />
      ))}
      <Backdrop
        open={open}
        closeable
        onClose={e => {
          setOpen(e);
          Taro.showTabBar();
        }}
      >
        <View className="flex items-center justify-center h-full ">
          <Swiper
            lazyRender
            loop={false}
            className="w-screen"
            onChange={setCurrent}
            value={current}
          >
            {imgs.map((item, i) => (
              <Swiper.Item key={i}>
                <Image
                  className="rounded h-full w-screen"
                  mode="widthFix"
                  src={item}
                />
              </Swiper.Item>
            ))}
          </Swiper>
        </View>
        <View className="absolute bottom-3 flex justify-between inset-x-0 mx-4 text-white">
          <View>
            {current + 1}/{imgs?.length}
          </View>
          <View className="flex gap-3" onClick={e => e.stopPropagation()}>
            <View onClick={() => {}}>保存到表情</View>
            <View onClick={() => saveImageToAlbum(imgs[current] ?? '')}>
              保存
            </View>
          </View>
        </View>
      </Backdrop>
    </View>
  );
};

export const RenderCardItem = ({ num, last, label }) => {
  return (
    <View className="w-full">
      <View>{label}</View>
      <RollingText
        duration={1}
        className="text-xl font-bold"
        startNum={0}
        targetNum={num ?? 0}
        stopOrder="rtl"
      />
      <View>较前日{last ?? '--'}</View>
    </View>
  );
};

export const RenderIcons = ({
  icons,
  size = 24,
  className,
  click,
}: {
  icons?: string[];
  size?: number;
  className?: string;
  click?: (e: ITouchEvent) => void;
}) => {
  return (
    <View className="flex gap-1" onClick={click}>
      {icons?.map((icon, i) => (
        <Image
          key={i}
          style={{ width: size, height: size }}
          className={className}
          src={imgAddPrefix(icon)}
        />
      ))}
    </View>
  );
};
